<template>
  <div class="detail-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <nav class="nav-container">
        <div class="nav-left">
          <button class="back-btn" @click="goBack">
            <span class="back-icon">←</span>
            返回
          </button>
          <h1 class="page-title">赛事详情</h1>
        </div>
      </nav>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <div class="detail-wrapper" v-if="!loading && eventDetail">
        <!-- 标题区域 -->
        <div class="detail-header">
          <h1 class="detail-title">{{ eventDetail.title }}</h1>
          <div class="detail-meta">
            <span class="meta-item">
              <span class="meta-label">发布时间：</span>
              <span class="meta-value">{{ formatDate(eventDetail.publishTime) }}</span>
            </span>
            <span class="meta-item" v-if="eventDetail.viewCount">
              <span class="meta-label">浏览次数：</span>
              <span class="meta-value">{{ eventDetail.viewCount }}</span>
            </span>
            <span class="meta-item">
              <span class="meta-label">状态：</span>
              <span class="meta-value status" :class="getStatusClass(eventDetail.status)">
                {{ getStatusText(eventDetail.status) }}
              </span>
            </span>
          </div>
        </div>

        <!-- 摘要区域 -->
        <div class="detail-summary" v-if="eventDetail.summary">
          <h3>摘要</h3>
          <p>{{ eventDetail.summary }}</p>
        </div>

        <!-- 内容区域 -->
        <div class="detail-content">
          <h3>详细内容</h3>
          <div class="rich-content" v-html="eventDetail.content"></div>
        </div>
      </div>
      
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-state">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>

      <!-- 错误状态 -->
      <div v-if="!loading && !eventDetail" class="error-state">
        <div class="error-icon">❌</div>
        <p class="error-text">赛事信息不存在或已被删除</p>
        <button class="error-btn" @click="goBack">返回列表</button>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getEventDetailService } from '@/api/home.js'

const router = useRouter()
const route = useRoute()
const eventDetail = ref(null)
const loading = ref(true)

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取状态样式类
const getStatusClass = (status) => {
  switch (status) {
    case 1:
      return 'status-published'
    case 0:
      return 'status-draft'
    default:
      return 'status-default'
  }
}

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 1:
      return '已发布'
    case 0:
      return '草稿'
    default:
      return '未知状态'
  }
}

// 加载赛事详情
const loadEventDetail = async () => {
  try {
    loading.value = true
    const eventId = route.params.id
    if (!eventId) {
      eventDetail.value = null
      return
    }

    const result = await getEventDetailService(eventId)
    if (result.code === 200 && result.data) {
      eventDetail.value = result.data
    } else {
      eventDetail.value = null
    }
  } catch (error) {
    console.error('加载赛事详情失败:', error)
    eventDetail.value = null
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadEventDetail()
})
</script>

<style scoped lang="scss">
@import '@/assets/css/event-detail.css';
</style>